window.addEventListener('load', function () {
    //功能一: 分类数据1渲染

    // 模拟服务器上的传递过来的数据
    let apiTypeData = [
        { name: "全部", keyword: "身份证实名", isnew: false },
        { name: "生活服务", keyword: "银行卡", isnew: false },
        { name: "金融科技", keyword: "短信", isnew: false },
        { name: "交通地理", keyword: "天气", isnew: false },
        { name: "充值缴费", keyword: "短信", isnew: false },
        { name: "数据智能", keyword: "手机归属地", isnew: false },
        { name: "企业工商", keyword: "IP", isnew: false },
        { name: "应用开发", keyword: "手机归属地", isnew: false },
        { name: "电子商务", keyword: "IP", isnew: false },
        { name: "吃喝玩乐", keyword: "视频", isnew: false },
        { name: "文娱视频", keyword: "视频", isnew: false },
        { name: "免费接口大全", keyword: "短信", isnew: true },
        { name: "短信", keyword: "身份证实名", isnew: false },
        { name: "汽车", keyword: "银行卡", isnew: false },
        { name: "核验", keyword: "银行卡", isnew: false },
        { name: "最新发布", keyword: "银行卡", isnew: true },
        { name: "API私有化部署", keyword: "身份证实名", isnew: true },
    ];
    /* 遍历数据拼接html结构，并放到指定位置 */
    apiTypeData.forEach(function (v) {
        getEle('.cateList').innerHTML += `
        <li class="${v.isnew ? 'bold' : ''}">${v.name}</li>
        `
    });
    //功能二
    //先给第一个绑定active
    getEles('.cateList li')[0].className = 'active';

    //2.遍历.cateList的所有li添加点击事件
    getEles('.cateList li').forEach(function (v, i) {
        v.addEventListener('click', function () {
            console.log(v);
            getEles('.cateList li').forEach(function (v) {
                v.classList.remove("active");
            })
            v.classList.add("active");

            //先干掉所有li标签上的active
            // v.classList.remove('active');
            // getEles('.cateList li').forEach(function (v) {
            //             //把文本和关键字放到指定位置


            // v.classList.add('active');

            txt.innerHTML = v.innerHTML;



            keyword.value = apiTypeData[i].keyword;
            // })
        })
    })

})



//定义数据源
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南111", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南222", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南333", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南444", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第五行
    { img: "API_01.jpg", name: "2021出行防疫政策指南555", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

];




/* 定义变量保存当前页面和么每一页显示条数 */
let currentPage = 0;   /* 当前页码，相当于索引 */
let pageSize = 5;       /* 每一页显示的条数 */

//计算总有也有多少页 = 总数据长度/每一页显示的条数
let total = Math.ceil(listDataArr.length / pageSize);


//渲染页码
for (let i = 1; i <= total; i++) {
    pageSpan.innerHTML += `
        <li>${i}</li>
        `
}

//2.封装渲染

function rander(data, curPage, page) {
    //4.遍历拼接html结构。并放到指定位置
    /*  console.log(data.slice(curPage, page)); */
    data.slice(curPage, page).forEach(function (v) {
        //拼接结构
        getEle('#listData').innerHTML += `
        <li class="rel">
        <span class="list-left ${v.isSpecial ? '' : 'on'}">企业专用</span>
        <div class="centers mt50">
            <img src="./imgs/${v.img}" alt="">
            <h2 h2 > ${v.name}</h2 >
                <span class="${v.price == '免费' ? 'green' : 'red'}">${v.price}</span>
        </div >
            <a href="#">申请数据</a>
    </li >
     `

    })

};
rander(listDataArr, currentPage, pageSize);

/* 分页效果 */
//1.获取所有DOM节点
let spans = getEles('.fenye li')
//遍历注册事件
spans.forEach(function (v, i) {
    spans[0].className = "active";

    //注册事件
    v.addEventListener('click', function () {
        //清除所有li上的类名
        spans.forEach(v => {
            v.className = '';
        })
        //给当前li添加类名
        this.className = 'active'
        //清除当前已经页面中有显示的数据
        getEle('#listData').innerHTML = ""
        rander(listDataArr, i * pageSize, (i + 1) * pageSize);
    })
}
);


